<template>
  <div>
    <div class="title">
      <div class="title-lab">{{ $t('custom.cus_sub_tit') }}</div>
      <div class="title-sub">{{ $t('custom.tit_sub_text') }}
        <span :style="imageCount ? { color: '#FF186B' } : ''">{{ imageCount ? imageCount : 0 }}</span>
        {{ $t('custom.tit_sub_text_end') }}
      </div>
    </div>
    <div class="list-sty">
      <!-- 只读的定制照片 -->
      <!-- <div v-if="readOnlyPicList && readOnlyPicList.length > 0 && isRead">
        <div v-for="(i, v) in readOnlyPicList" :key="v">
          <div class="row-gutter">
            <div class="preview-img">
              <img class="upload-image" :src="i.imageUrl" alt="" />
            </div>
            <div class="desc-sty">
              <Input v-model="i.serviceRemark" readonly maxlength="200" show-word-limit type="textarea" :rows="3"
                :autosize="{ maxRows: 4, minRows: 4 }" />
            </div>
          </div>
        </div>
      </div> -->
      <!-- 可编辑的定制照片 -->
      <div v-for="(item, index) in customItemList" :key="index" :data-index="index">
        <div class="row-gutter">
          <div class="desc-sty">
            <Input v-model="item.serviceRemark" maxlength="200" show-word-limit type="textarea" :rows="3"
              :autosize="{ maxRows: 4, minRows: 4 }" :placeholder="$t('custom.add_pic_desc')" />
            <div class="pos-sty">
              <Dropdown trigger="click" placement="bottom" transfer @on-click="selectTip(index)">
                <div class="tip-btn">
                  <Icon type="ios-list" size="12" color="#AEAFB1" />
                  {{ $t('custom.tip_btn_text') }}
                </div>
                <DropdownMenu slot="list">
                  <DropdownItem v-for="v in tipList" :key="v.id" :name="v.tips">
                    <div @click="handleDropdownItemClick(v.tips, index)">{{ v.tips }}</div>
                  </DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </div>
          </div>
          <Upload :show-upload-list="false" :headers="{
            'X-Access-Token': userToken,
            'lang': 'en_US'
          }" biz="chat" :data="{
            biz: 'custom'
          }" name="file" :disabled="item.uploadLoading" :max-size="3072"
            :before-upload="() => handleBeforeUpload(item)" :on-success="(response) => onSuccess(response, item)"
            :on-exceeded-size="() => handleMaxSize(file, item)" :action="uploadURL" :accept="'.png,.jpg,.jpeg'">
            <div class="loading-wrap" v-if="item.uploadLoading">
              <t-loading></t-loading>
            </div>
            <div v-if="item.imageUrl != ''" class="preview-img">
              <img class="upload-image" :src="item.imageUrl" alt="" />
              <img src="@/assets/images/public/delete.png" class="delete-icon"
                @click="($event) => removeMet($event, item)" alt="">
              <div class="overlay"></div>
            </div>
            <div v-if="!item.imageUrl & !item.uploadLoading" class="upload-sty">
              <img src="@/assets/images/public/upload_img.webp" class="upload-img" alt="">
            </div>
          </Upload>

          <div @click="removeCustom(index)" class="iconfont">
            <Icon type="md-close-circle" />
          </div>
        </div>
      </div>
    </div>
    <div class="add" @click="addCustom">
      <div class="add-pic-btn">+ {{ $t('custom.add_pic_text') }}</div>
      <div class="cus-fee">({{ $t('custom.ser_fee_text') }}：<span>CNY {{ picFeeCom }})</span></div>
    </div>
    <Divider v-if="isView == false && isShowQcVideoCus === false" />
    <div class="title" v-if="isView == false && isShowQcVideoCus === false">
      <div class="title-lab">{{ $t('custom.cus_name_vid') }}</div>
      <div class="title-sub">{{ $t('custom.cus_vid_sub_text') }}</div>
    </div>
    <div class="list-sty">
      <Row :gutter="16" v-if="isView == false && isShowQcVideoCus === false">
        <Col :span="$route.path == '/confirm/order' ? 12 : 8" v-for="item in cardType" :key="item.videoType">
        <div :class="item.isActive ? 'is-active' : 'card'" @click="selectCard(item)">
          <div class="card-title">
            <div class="left">{{ item.title }}</div>
            <div class="right" @click="jumpLink()">{{ item.handleText }}</div>
          </div>
          <div v-if="item.disabled" style="display: flex;justify-content: center;">
            <img src="@/assets/images/public/null_status1.png" style="width: 126px;" alt="">
          </div>
          <div v-else class="card-content">{{ item.content }}</div>
          <div class="tag" v-if="item.isActive">
            <Icon type="md-checkmark" size="14" color="#FFFFFF" />
          </div>
        </div>
        </Col>
      </Row>
    </div>
    <div class="add" v-if="isView == false && isShowQcVideoCus === false">
      <div></div>
      <div class="cus-fee">{{ $t('custom.ser_fee_text') }}：<span>CNY {{ vidFeeCom }}</span></div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { bigTimes } from "@/common/digital-computation";
import { commonUpload } from "@/api/sys";
import TLoading from "@/components/t-loading";
export default {
  props: {
    dataInfo: Object,
    isView: Boolean,
    isRead: {
      type: Boolean,
      default: false
    },
    isShowQcVideoCus: {
      type: Boolean,
      default: false
    }
  },
  components: { TLoading },
  data() {
    return {
      form: {},
      userToken: localStorage.getItem("USER_TOKEN"),
      uploadURL: commonUpload(),
      customItemList: [],
      cardType: [
        { videoType: 1, isActive: false, title: this.$t('custom.vid_card_tit'), handleText: this.$t('custom.card_rig_text'), content: this.$t('custom.card1_desc'), disabled: false },
        { videoType: 0, isActive: false, title: this.$t('custom.later_add_more'), handleText: '', content: '', disabled: true }
      ],
      tipList: [
        { tips: this.$t('custom.ask_text1'), id: 1 },
        { tips: this.$t('custom.ask_text2'), id: 2 },
        { tips: this.$t('custom.ask_text3'), id: 3 },
        { tips: this.$t('custom.ask_text4'), id: 4 },
        { tips: this.$t('custom.ask_text5'), id: 5 },
        { tips: this.$t('custom.ask_text6'), id: 6 },
        { tips: this.$t('custom.ask_text7'), id: 7 },
      ],
      // readOnlyPicList: [],//只读的定制照片
      // readOnlyVidList: [],//只读的定制视频
    }
  },
  watch: {
    customItemList: {
      deep: true,
      handler(newVal) {
        newVal.forEach(item => {
          Object.keys(item).forEach(() => {
            // 传值的时候不用传uploadLoading
            const sendData = newVal.map(item => {
              const { uploadLoading, ...rest } = item;
              return rest;
            })
            this.$emit('sendDataToParent', sendData);
          });
        });
      }
    },
    dataInfo: {
      deep: true,
      handler(newVal) {
        this.customItemList = [];
        if (newVal.services && newVal.services.length > 0) {
          if (this.isRead) {
            // 是否显示不可编辑的定制照片
            // this.readOnlyPicList = newVal.services;//只读
          } else {
            this.customItemList = newVal.services;//可编辑
          }
        }
        // 定制视频
        if (newVal.videoServicesV1 && newVal.videoServicesV1.length > 0) {
          newVal.videoServicesV1.forEach(item => {
            if (!this.isRead) {
              this.cardType.forEach(v => {
                if (item.videoType === v.videoType) {
                  v.isActive = true;
                }
              })
            }
          })
          this.$emit('selVidData', newVal.videoServicesV1)
        }
      }
    }
  },
  computed: {
    ...mapState({
      userLanguage: (state) => state.user.userLanguage,
    }),
    imageCount() {
      return this.customItemList.filter(item => item.imageUrl || item.serviceRemark).length;
    },
    picFeeCom() {
      return bigTimes(this.customItemList.length, 1);
    },
    vidFeeCom() {
      const vidNum = this.cardType.filter(item => item.isActive).length;
      return bigTimes(vidNum, 7);
    }
  },
  methods: {
    // 添加规格
    addCustom() {
      this.customItemList.push({
        uploadLoading: false,
        serviceRemark: '',//备注
        imageUrl: '',//图片路径
        serviceType: Number(1),//增值服务类型:1-图片;2-视频
      })
    },
    // 删除当前行
    removeCustom(index) {
      this.customItemList.splice(index, 1);
    },
    handleMaxSize(file, item) {
      item.uploadLoading = false;
      this.$Message.error(`File ${file.name} is too large, no more than 3M.`);
    },
    onSuccess(response, item) {
      // 上传成功
      item.uploadLoading = false;
      if (response.code == 0 || response.code == 200 || response.code == 201) {
        let data = response.result;
        item.imageUrl = data.url;
      } else {
        this.$Message.error(response.message);
      }
    },
    onError() {
      this.$Message.error(this.$t('user.uploadFailure'));
    },
    handleBeforeUpload(item) {
      item.uploadLoading = true;
    },
    // 删除图片
    removeMet(event, item) {
      event.stopPropagation();
      item.imageUrl = '';
    },
    // 定制视频选择
    selectCard(item) {
      if (!item.disabled) {
        item.isActive = !item.isActive;
        // 向父组件传递选中的数据
        let selData = this.cardType.filter(item => item.isActive);
        this.$emit('selVidData', selData)
      }
    },
    jumpLink() {
      console.log("开发环境", process.env)
      // 根据开发环境确定基础的id值
      let baseId = this.userLanguage.code == 'zh_CN' ? '1856253831232458754' : '1856254763940810754';
      // 进行路由跳转
      window.open(`/notice/${baseId}`, '_blank');
    },
    selectTip() {
      // 这个方法可以保留，也可以根据实际需求进一步处理，比如一些额外的逻辑判断等
      // 这里目前只是作为接收从Dropdown传递过来的索引参数的中间方法
    },
    handleDropdownItemClick(selectedValue, index) {
      // 将选中的值赋给当前循环项的serviceRemark
      this.customItemList[index].serviceRemark = selectedValue;
    }
  }
}
</script>
<style lang="less" scoped>
.title {
  gap: 11px;
  margin-bottom: 24px;

  &-lab {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #2F333A;
    line-height: 23px;
    margin-bottom: 8px;
  }

  &-sub {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    line-height: 23px;
    color: #969696;
  }
}

.list-sty {
  max-height: 300px;

  .row-gutter {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 8px;
    background: #FFF;
    position: relative;
    border: 1px solid #fff;

    .preview-img {
      position: relative;

      .upload-image {
        width: 118px;
        height: 118px;
        border-radius: 11px 11px 11px 11px;
      }

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 118px;
        height: 118px;
        background-color: transparent;
        display: none;
      }

      .delete-icon {
        display: none;
      }
    }

    .preview-img:hover>.overlay {
      display: block;
      border-radius: 11px;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .preview-img:hover>.delete-icon {
      display: block;
      width: 24px;
      height: 24px;
      position: absolute;
      top: 42px;
      left: 48px;
      z-index: 2;
      cursor: pointer;
    }

    .upload-sty {
      width: 118px;
      height: 118px;
      background: #FFFFFF;
      border-radius: 11px 11px 11px 11px;
      border: 2px dashed #CACACA;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .iconfont {
      color: #AEB0B9;
      font-size: 32px;
      cursor: pointer;
      position: absolute;
      top: -16px;
      right: -16px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;

      &:hover {
        color: #FF186B;
      }
    }

    :deep(textarea.ivu-input) {
      padding: 16px;
      background: #FFFFFF;
      border-radius: 11px 11px 11px 11px;
      border: 1px solid #E9EAF3;
      font-family: Annapurna SIL, Annapurna SIL;
      font-weight: 400;
      font-size: 19px;
      line-height: 22px;
    }

    :deep(.ivu-input-word-count) {
      font-family: Open Sans, Open Sans;
      font-weight: 400;
      font-size: 19px;
      color: #AEB0B9;
      line-height: 22px;
    }

    &:hover {
      border: 1px solid #FF186B;

      .iconfont {
        color: #FF186B;
      }
    }
  }

  .desc-sty {
    flex: 1;
    position: relative;

    :deep(textarea.ivu-input) {
      border: none;
    }

    :deep(.ivu-input-word-count) {
      bottom: 8px;
    }

    .pos-sty {
      position: absolute;
      bottom: 8px;
      left: 14px;

      .tip-btn {
        min-width: 93px;
        font-family: PingFang SC, PingFang SC;
        font-size: 14px;
        color: #333333;
        border-radius: 4px;
        border: 1px solid #E9EAF3;
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        padding: 10px;
        height: 28px;
      }
    }
  }

  .card {
    min-height: 175px;
    padding: 16px;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #E9EAF3;
    margin-bottom: 24px;

    &-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .left {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #1E1714;
        line-height: 19px;
      }

      .right {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 14px;
        color: #FF186B;
        line-height: 20px;
      }
    }

    &-content {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #767B93;
      line-height: 20px;
    }
  }

  .card:hover {
    cursor: pointer;
    background: #FFF3F8;
    border: 1px solid #FF186B;
  }

  .is-active {
    min-height: 175px;
    padding: 16px;
    background: #FFF3F8;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #FF186B;
    position: relative;
    margin-bottom: 24px;

    .tag {
      padding: 5px 12px;
      background: #FF186B;
      border-radius: 4px 0 7px 0;
      position: absolute;
      bottom: 0;
      right: 0;
    }

    .card-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .left {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #1E1714;
        line-height: 19px;
      }

      .right {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 14px;
        color: #FF186B;
        line-height: 20px;
      }
    }

    .card-content {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #767B93;
      line-height: 20px;
    }
  }
}

.add {
  display: flex;
  align-items: center;
  border-radius: 8px;
  background: #FFF;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  gap: 5px;

  color: #FF186B;

}
</style>